@extends('home.user_left')

@section('right')
<!-- <a id="ibangkf" href="http://www.ibangkf.com">在线客服系统 </a>
<script language="javascript" src="http://c.ibangkf.com/i/c-xiaobao.js"></script>
 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="/web/picInfo/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/web/picInfo/cropper/cropper.min.css" rel="stylesheet">
<link href="/web/picInfo/sitelogo/sitelogo.css" rel="stylesheet">
<script src="/web/picInfo/cropper/cropper.min.js"></script>
<script src="/web/picInfo/sitelogo/sitelogo.js"></script>
<script src="/web/picInfo/bootstrap/js/bootstrap.min.js"></script>
<link href="/home/css/infstyle.css" rel="stylesheet" type="text/css" />
<div class="user-info">
			<!--标题 -->
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">{{ $title }}</strong> / <small>Personal&nbsp;information</small></div>
			</div>
			<hr/>
			<form class="am-form am-form-horizontal" action="/home/user_details/doedit" method="post" enctype="multipart/form-data">
			{{ csrf_field() }}
			<!--头像 -->
			<div class="user-infoPic" style="margin-left:-100px;margin-bottom:20px">
				<div id="crop-avatar" class="col-md-6">
					<div class="avatar-view" title="Change Logo Picture">
				    	<img src="/images/admin/user_pic/{{ $data['user_pic'] }}" alt="Logo" style="width:100px;height:100px;border-radius:50px;">
				    </div>
				</div>
				<p class="am-form-help">头像</p>

				<div class="info-m">
					<div><b>昵称：<i>{{ $data['user_nickname'] }}</i></b></div>
					<div class="u-level">
						<span class="rank r2">
				             <s class="vip1"></s><a class="classes" href="#" style="color:green">铜牌会员</a>
				             <input type="hidden" name="user_grade" value="{{ $data['user_grade'] }}">
			            </span>
					</div>
					<div class="u-safety">
						<a href="safety.html">
						 账户安全
						<span class="u-profile"><i class="bc_ee0000" style="width: 60px;" width="0">60分</i></span>
						</a>
					</div>
				</div>
					<div style="position:relative;left:120px;top:40px" id="dui" >
						<img src="/images/dui.png" alt="" style="width:35px;height:35px;position:relative;top:-4px" >
						<font color="green" style="font-size:18px;">上传头像成功</font>
					</div>
			</div>

			<!--个人信息 -->
			<div style="margin-left:-130px">
			<div class="info-main">	
					<!-- 昵称 -->
					<div class="am-form-group">
						<label for="user-name2" class="am-form-label">账户积分：</label>
						<div class="am-form-content" style="margin-top:9px">
							<font color="green">{{ $data['user_integral'] }}</font>
							<input type="hidden" name="user_integral" value="{{ $data['user_integral'] }}">
						</div>
					</div>
					
					<!-- 真实姓名 -->
					<div class="am-form-group">
						<label for="user-name" class="am-form-label">姓名</label>
						<div class="am-form-content">
							<input type="text"  name="user_realname" id="user_realname" placeholder="请输入真实性别" value="{{ $data['user_realname'] }}">
						</div>
					</div>
					
					<!-- 性别 -->
					<div class="am-form-group">
						<label class="am-form-label">性别：</label>
						<div class="am-form-content sex">
							<label class="am-radio-inline">
								<input type="radio" name="user_sex" value="男" data-am-ucheck @if($data['user_sex'] == '男') checked @endif/> 男
							</label>
							<label class="am-radio-inline">
								<input type="radio" name="user_sex" value="女" data-am-ucheck @if($data['user_sex'] == '女') checked @endif> 女
							</label>
							<label class="am-radio-inline">
								<input type="radio" name="user_sex" value="保密" data-am-ucheck @if($data['user_sex'] == '保密') checked @endif> 保密
							</label>
						</div>
					</div>

					<!-- 生日 -->
					<div class="am-form-group">
						<label for="user-birth" class="am-form-label">生日：</label>
						<div class="am-form-content birth">
							<div class="birth-select">
								<!-- 年标签 -->
								<select name="user_birth_year">
								@for($i = 1990;$i < 2022;$i++)
									<option value="{{ $i }}" @if($data['user_birth_year'] == $i) selected @endif/>{{ $i }}</option>
								@endfor
								</select>

								<em>年</em>
							</div>
							<div class="birth-select2">
								<!-- 月标签 -->
								<select name="user_birth_month">
									@for($i = 1;$i <= 12;$i++)
									<option value="{{ $i }}" @if($data['user_birth_month'] == $i) selected @endif>{{ $i }}</option>
									@endfor
								</select>
								<em>月</em></div>
							<div class="birth-select2">
								<select name="user_birth_day">
									@for($i = 1;$i <= 30;$i++)
									<option value="{{ $i }}" @if($data['user_birth_day'] == $i) selected @endif>{{ $i }}</option>
									@endfor
								</select>
								<em>日</em>
							</div>
						</div>
				
					</div>

					<!-- 电话 -->
					<div class="am-form-group">
						<label for="user-phone" class="am-form-label">电话：</label>
						<div class="am-form-content">
							<input id="user_phone" placeholder="telephonenumber" type="tel" value="{{ $data['user_phone'] }}">
						</div>
					</div>

					<!-- 电子邮件 -->
					<div class="am-form-group">
						<label for="user-email" class="am-form-label">电子邮件：</label>
						<div class="am-form-content">
							<input id="user_email" name="user_email" placeholder="Email" type="email" value="{{ $data['user_email'] }}">

						</div>
					</div>
					<div class="am-form-group address">
						<label for="user-address" class="am-form-label">收货地址：</label>
						<div class="am-form-content address">
							<a href="address.html">
								<p class="new-mu_l2cw">
									<span class="province">湖北</span>省
									<span class="city">武汉</span>市
									<span class="dist">洪山</span>区
									<span class="street">雄楚大道666号(中南财经政法大学)</span>
									<span class="am-icon-angle-right"></span>
								</p>
							</a>

						</div>
					</div>
					<div class="am-form-group safety">
						<label for="user-safety" class="am-form-label">账号安全</label>
						<div class="am-form-content safety">
							<a href="safety.html">

								<span class="am-icon-angle-right"></span>

							</a>

						</div>
					</div>
					<div class="info-btn">
						<!-- 获取id值 -->
						<input type="hidden" name="id" value="{{ $data['id'] }}">
						<input type="submit" value="保存修改" class="am-btn am-btn-danger">
					</div>
				</form>
			</div>
			</div>
		</div>

<!-- ############################################################################### -->
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content"  style="float:left;width:870px">
			<form class="avatar-form" action="/home/user_details/dopic" enctype="multipart/form-data" method="post" id="myform">
				{{ csrf_field() }}
				<div class="modal-header">
					<button class="close" data-dismiss="modal" type="button">&times;</button>
					<h4 class="modal-title" id="avatar-modal-label">Change Logo Picture</h4>
				<font color="#aac">(上传图片类型(jpeg、png、gif)，大小不超过4M)</font>	
				</div>
				<div class="modal-body">
					<div class="avatar-body">
						<div class="avatar-upload">
							<input class="avatar-src" name="avatar_src" type="hidden">
							<input class="avatar-data" name="avatar_data" type="hidden">
							<label for="avatarInput">图片上传</label>
							<input class="avatar-input" id="avatarInput" name="user_pic" type="file" onchange="info(this)">
							
						</div>

						<div class="alert alert-danger avater-alert" id="cuotishi">
							<button type="button" class="close" data-dismiss="alert">×</button><font id="tishi">parsererror</font>
						</div>

						<div> 
							<div class="col-md-9" style="padding-left:0px">
								<div class="avatar-wrapper picInfo"></div>
							</div>
							<div class="col-md-3">
								<div class="avatar-preview preview-lg picInfo"></div>
								<div class="avatar-preview preview-md picInfo"></div>
								<div class="avatar-preview preview-sm picInfo"></div>
							</div>
						</div>

						<div class="avatar-btns picInfo">
							<div class="col-md-9" style="padding-left:0px;margin:25px 0 25px 0">
								<div class="btn-group">
									<button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
								</div>
								<div class="btn-group">
									<button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
								</div>
							</div>
							<div class="col-md-3" style="margin:25px 0 25px 0" id="sub">
								<button class="btn btn-success btn-block avatar-save" type="submit" onclick="func()"><i class="fa fa-save"></i> 保存修改</button>
							</div>
						</div>


					</div>
				</div>
  		</form>
  	</div>
  </div>
</div>
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>

      <script type="text/javascript">
      	$('#cuotishi').hide();
      	$('#sub').hide();
      	$('#dui').hide();
          /**
           * 无刷新头像
           * 
           * @param       object          file          获取file所有属性
           * @param       object          reader        读取文件属性
           * @param       int             file.files[0]['size']  获取上传文件大小
           * @param       string          file.files[0]['type']  获取上传文件类型
           * 当符合条件时，可以提交表单
           * @将文件的路径赋予img src属性
           */
          // 获取input属性
          function info(file){
            console.log(file.files[0])
            // 判断是否获取成功
            if(file.files && file.files[0]){
                if(file.files[0]['size'] > 4194304){
                	console.log(1);
					$('#cuotishi').show();
                	$('.picInfo').hide();
                    $('#tishi').html('文件字节超过大小，请重新上传图片')
                    return false;
				}

                type = file.files[0]['type']
                if(type != 'image/jpeg' && type != 'image/png' && type != 'image/gif'){
                	$('#cuotishi').show();
                	$('.picInfo').hide();
                    $('#tishi').html('文件类型不符合，请上传图片')
                    return false;
                }
                $('.picInfo').show();
                $('#cuotishi').hide();
                $('#sub').show();
               }
          }

          function func()
          {
          	var k = 0;
          	var time = setInterval(function(){
          		$('#dui').fadeIn();
          		k++;
          		console.log(k);
          		if(k == 3){
          		clearInterval(time);
          		$('#dui').fadeOut();
          	}
          	},1000)

          }
      </script>
<!-- ################################################################################# -->
@endsection
